<script setup lang="js">
import { ref, onMounted, shallowRef } from 'vue'
import {
  NMessageProvider,
  NSpace,
  NButton,
  NImage,
  createDiscreteApi,
  NCollapse,
  NCollapseItem,
} from 'naive-ui'
const { message, notification, dialog, loadingBar, modal } = createDiscreteApi([
  'message',
  'dialog',
  'notification',
  'loadingBar',
  'modal',
])
const MessageProvider = shallowRef(NMessageProvider)
import { getTextFromClipboard, startTyping } from '../utils/utils'
const countSync = ref(0)
const link = ref('https://xx/create-chrome-ext')

const typeingLoading = ref(false)

const simulateTypingHandle = async () => {
  typeingLoading.value = true
  getTextFromClipboard()
    .then((text) => {
      chrome.runtime.sendMessage({ action: 'simulateTyping', data: text }, function (response) {})
      typeingLoading.value = false
    })
    .catch(() => {
      typeingLoading.value = false
    })
}

const captureScreenshotHandle = async () => {
  typeingLoading.value = true
  chrome.runtime.sendMessage({ action: 'captureScreenshot' }, function (response) {
    console.log('response: ', response)
    loadScreenshots()
  })
  typeingLoading.value = false
}

// 从 localStorage 加载截图
let screenshots = ref([])
const loadScreenshots = () => {
  chrome.storage.local.get('screenshots', (result) => {
    screenshots.value = result.screenshots || []
    // 动态插入所有截图
  })
}

const clearScreenHandle = () => {
  chrome.storage.local.remove('screenshots', function () {
    console.log('已成功清除指定键值对');
    loadScreenshots()
  })
}

onMounted(() => {
  loadScreenshots()
  chrome.runtime.onMessage.addListener((request) => {
    if (request.type === 'COUNT') {
      countSync.value = request?.count ?? 0
    }
  })
})
</script>

<template>
  <main>
    <message-provider>
      <h3>SidePanel Page</h3>
      <section>
        <h4>便捷工具</h4>
        <n-space>
          <n-button strong secondary @click="captureScreenshotHandle"> 记录当前页 </n-button>
          <n-button
            strong
            secondary
            type="primary"
            :loading="typeingLoading"
            @click="simulateTypingHandle"
          >
            模拟输入
          </n-button>
        </n-space>
      </section>
      <section>
        <section style="display: flex; flex-wrap: wrap; margin-top: 12px">
          <n-collapse>
            <n-collapse-item title="历史记录" name="1">
              <div
                class="clear-icon"
                style="width: 30px; cursor: pointer"
                @click="clearScreenHandle"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  viewBox="0 0 32 32"
                >
                  <path
                    d="M29.438 16.572l-7.985-7.986a2.001 2.001 0 0 0-2.829 0l-5.358 5.358L9 2H7L2 16h2l.999-3h6l.803 2.408l-7.216 7.216a2 2 0 0 0 0 2.829L9.132 30h9.59l10.716-10.717a1.917 1.917 0 0 0 0-2.712zM5.665 11l2.331-7l2.336 7zm12.23 17H9.96L6 24.038l6.312-6.311l7.928 7.927zm3.76-3.76l-7.928-7.927L20.039 10l7.927 7.927z"
                    fill="currentColor"
                  ></path>
                </svg>
              </div>
              <div style="display: flex; flex-wrap: wrap">
                <div
                  style="display: flex; flex-direction: column; width: 30%"
                  v-for="(item, index) in screenshots"
                  :key="index"
                >
                  <strong>{{ item.key }}</strong>
                  <n-image width="100%" :src="item.dataUrl" />
                </div>
              </div>
            </n-collapse-item>
          </n-collapse>
        </section>
      </section>

      <a :href="link" target="_blank"> generated by create-chrome-ext </a>
    </message-provider>
  </main>
</template>

<style>
main {
  text-align: center;
  padding: 1em;
  margin: 0 auto;
}

h3 {
  color: #42b983;
  text-transform: uppercase;
  font-size: 1.5rem;
  font-weight: 200;
  line-height: 1.2rem;
}

h4 {
  color: rgb(31, 34, 37);
  text-align: left;
}

a {
  font-size: 0.5rem;
  margin: 0.5rem;
  color: #cccccc;
  text-decoration: none;
}
</style>
